import styles from "@/styles/DataManage.module.css";
import { DoubleLeftOutlined, DragOutlined } from "@ant-design/icons";
import { Button, Modal } from "antd";
import Image from "next/image";
import RightArrows from "@/assets/Right_Arrows.svg";
import DatabaseIcon from "@/assets/Database.svg";
import { useRouter } from "next/router";
import { useState } from "react";
function ToolBar() {
  const router = useRouter();
  const [open, setOpen] = useState(false);

  const handleCancel = function () {
    setOpen(false);
  };

  return (
    <div className={styles.toolBar}>
      <Button
        type="text"
        onClick={() => {
          router.back();
        }}
      >
        <DoubleLeftOutlined />
        返回
      </Button>
      <Button
        type="primary"
        onClick={() => {
          setOpen(true);
        }}
      >
        <DragOutlined />
        增广
      </Button>
      <Modal
        width={900}
        title="样本集增广"
        open={open}
        onCancel={handleCancel}
        footer={null}
      >
        <div className={styles.expandContent}>
          <div>增广前</div>
          <div style={{ gridColumn: "3" }}>增广后</div>
          <Image
            style={{ gridRow: "2", gridColumn: "1" }}
            width="150"
            height="150"
            alt=""
            src={DatabaseIcon}
          ></Image>
          <div className={styles.expandAction}>
            <Button shape="round">预览</Button>
            <Image alt="" src={RightArrows}></Image>
          </div>
          {[3, 4, 5, 6].map((item) => (
            <Image
              key={item}
              style={{ gridRow: "2", gridColumn: `${item}` }}
              width="150"
              height="150"
              alt=""
              src={DatabaseIcon}
            ></Image>
          ))}
          <div className={styles.expandButtons}>
            <Button
              type="primary"
              style={{ marginRight: 12 }}
              onClick={handleCancel}
              loading
            >
              确定
            </Button>
            <Button onClick={handleCancel}>取消</Button>
          </div>
        </div>
      </Modal>
    </div>
  );
}

export default ToolBar;
